<template>
  <div style="width: 890px; margin: 55px auto">
    <el-row :gutter="20" v-for="(item, index) in form" :key="index" style="margin-bottom: 20px">
      <el-col :span="6">
        <div class="block">
          <el-date-picker
              v-model="item.time"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="使用时间"
          />
        </div>
      </el-col>
      <el-col :span="6">
        <el-input :autofocus="true" v-model="item.amount" autocomplete="off" placeholder="金额"/>
      </el-col>
      <el-col :span="6">
        <el-select v-model="item.category">
          <el-option value="成本"/>
          <el-option value="生活"/>
          <el-option value="收入"/>
          <el-option value="精神"/>
          <el-option value="物质"/>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-input v-model="item.purpose" autocomplete="off" placeholder="用处"/>
      </el-col>
    </el-row>
  </div>
  <el-button style="margin-top: -50px" @click="record">记录</el-button>
</template>

<script setup>
import {inject, ref} from "vue";
import { format } from 'date-fns';
// import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";

const form = ref([{time:format(new Date(), 'yyyy-MM-dd'), category: "成本"},
  { time: format(new Date(), 'yyyy-MM-dd'),category: "成本"},
  {time:format(new Date(), 'yyyy-MM-dd'), category: "成本"},
  {time: format(new Date(), 'yyyy-MM-dd'), category: "成本"},
  {time: format(new Date(), 'yyyy-MM-dd'), category: "成本"},
  {time:format(new Date(), 'yyyy-MM-dd'), category: "成本"},
  {time: format(new Date(), 'yyyy-MM-dd'), category: "成本"},
  {time: format(new Date(), 'yyyy-MM-dd'), category: "成本"},
])
const GLOBAL_CONSTANT = inject('GLOBAL_CONSTANT');

const record = () => {
  // let data = JSON.stringify(form);
  axios.post(GLOBAL_CONSTANT + "wolf/tally/record", form.value, {
    headers: {
      'Content-Type': 'application/json;charset=utf-8'
    }
  })
      .then((res) => {
        if (res.data.code === 610) {
          ElMessage({
            message: res.data.msg,
            type: 'success',
          })
        }
      })
}
</script>

<style scoped>

</style>